
<template>
	<div id="communityBuildingList" v-cloak>

    <!--工具条-->
    <div name="searchColums" id="searchColums">
      <el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
        <el-form-item class="el-form-item" label="活动名称">
          <el-input v-model="filters.title" name="title" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item class="el-form-item" label="小区">
			<el-select size="small" v-model="filters.communityId" placeholder="请选择">
				<el-option v-for="item in communityOptions" :key="item.value" :label="item.name" :value="item.id">
				</el-option>
			</el-select>
		</el-form-item>
        <span class="bth_search">
					<el-form-item>
			    		<el-button type="success" icon="el-icon-search" v-on:click="getDatas">查询</el-button>
			    	</el-form-item>
			    	<el-form-item>
			    		<el-button icon="el-icon-refresh" @click="resetSearchForm('filters')">重置</el-button>
			    	</el-form-item>
				</span>
      </el-form>
    </div>

    <!--列表-->
    <el-table :data="datas" id="datagrid" empty-text=" " height="250" border stripe size="mini"
              :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading"
              :row-class-name="tableRowClassName" @sort-change="handleSortChange" @selection-change="selsChange"
              style="width: 100%;">
      <el-table-column type="selection" width="45"></el-table-column>
      <el-table-column prop="index" :formatter="index_formatter" label="序号" width="60"></el-table-column>
      <el-table-column prop="title" label="活动名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="communityName" label="参加人所属小区" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column prop="buildingName" label="参加人所属楼" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column prop="unitName" label="参加人所属单元" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column prop="houseName" label="参加人所属房屋" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column prop="ownerName" label="参加人名称" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column prop="joinDate" label="参加时间" width="180" show-overflow-tooltip></el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar" id="pageDiv">
      <el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next"
                     style="float:right;"></el-pagination>
    </el-col>

  </div>
</template>
<script>
	import { getToken, setToken, removeToken } from '@/util/auth'
	import request from '@/router/axios'

  export default {
    name: 'table_notification_user',

    data() {
      return {
        filters: {
          name: '',
          communityId:'',
        },
        url: {
          list: '/admin/notificationUser/page'
        },
        datas: [],
        fileList: [],
        communityOptions:[],
        total: 0,
        page: 1,
        pageSize: 10,
        sort: {
          sort: 'sort',
          order: 'asc'
        },
        listLoading: false,
        sels: [],//列表选中列
      }
    },

    methods: {
      
      handleSortChange(sort) {
        this.sort = {
          sort: sort.prop,
          order: sort.order == 'ascending' ? 'asc' : 'desc'
        };
        this.getDatas();
      },
      tableRowClassName(row, index) {
        //把每一行的索引放进row
        row.index = row.rowIndex
      },
      headStyle({row, rowIndex}) {
        return "table_head_style";
      },
      index_formatter: function (row, column, cellValue, index) {
        //放回索引值
        return (this.pageSize * (this.page - 1) + 1 + index);
      },
      formatDate: function (row, column, cellValue, index) {
        return !!cellValue ? utilFormatDate(new Date(cellValue), 'yyyy-MM-dd') : '';
      },
      formatDateTime: function (row, column, cellValue, index) {
        return !!cellValue ? utilFormatDate(new Date(cellValue), 'yyyy-MM-dd hh:mm:ss') : '';
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getDatas();
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.page = 1;
        this.getDatas();
      },
      resetSearchForm(forName) {
        this.filters = {
          title: '',
          communityId:''
        }
      },

			//获取用户列表
      getDatas() {
        let para = {
          params: {
            page: this.page,
            limit: this.pageSize,
            //排序
            orderByField: this.sort.sort,
            isAsc: this.sort.order,
            title: this.filters.title,
            communityId:this.filters.communityId
          }
        };
        this.listLoading = true;
        request.get(this.url.list, para).then((res) => {
          this.total = res.data.total;
          var datas = res.data.records;
          this.datas = datas;
          this.listLoading = false;
        });
      },
      selsChange: function (sels) {
        this.sels = sels;
      },
		
			//初始化数据字典
      initDictsData: function () {
      	request.get("/admin/community?getCommunitysByCurrentUser").then((res) => {
					if(res.status === 200) {
						this.communityOptions = res.data;
					}
				});
      }

    },
    mounted() {

      this.initDictsData();
      this.getDatas();
    }
 };

</script>
